<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #map {
        width: 800px;
        height: 600px;
        background-color: #ccc;
        margin: 50px auto;
        /*地图需要相对定位，因为蛇和食物需要对照地图进行定位*/
        position: relative;
    }

    #btn {
        display: block;
        width: 100px;
        margin: 0 auto;
    }
    </style>
</head>

<body>
    <button id="btn">开始游戏</button>
    <div id="map"></div>
    <script src="food.js"></script>
    <script src="snake.js"></script>
    <script src="game.js"></script>
    <script>
    // 获取地图
    var map = document.querySelector("#map");
    // 开始游戏按钮
    var btn = document.querySelector("#btn");


    // 得到游戏的实例对象
    var g = new Game(map);
    // 渲染（蛇、食物）
    g.render();

    btn.onclick = function() {
        // 开始游戏--蛇移动
        g.startGame();
    }
    </script>
</body>

</html>
